<template>
    <div>
        <Title title="编辑广告"></Title>
        <form class="formstyle">
            <div>
                <strong>
                    <i>*</i>
                    广告名称:
                </strong>
                <input type="text" v-model="name">

            </div>
            <div>

                <strong>
                    广告位置:
                </strong>
                <el-select v-model="value" placeholder="广告位置">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div>
                <strong>
                    <i>*</i>
                    开始时间:
                </strong>
                <el-date-picker v-model="begintime" type="date" placeholder="请选择日期" size="default" />

            </div>
            <div>

                <strong>
                    <i>*</i>
                    到期时间:
                </strong>
                <el-date-picker v-model="endtime" type="date" placeholder="请选择日期" size="default" />


            </div>
            <div>

                <strong>
                    上线/下线:
                </strong>
                <el-radio-group v-model="upOrdown">
                    <el-radio :label="0" size="large">下线</el-radio>
                    <el-radio :label="1" size="large">上线</el-radio>
                </el-radio-group>
            </div>
            <div>
                <strong>
                    广告图片:
                </strong>
                <!-- <el-button type="primary">点击上传</el-button>
            </div>
            <div>
                <strong>
                </strong>
                <small>只能上传jpg/png文件,且不超过100kb</small>
            </div>
            <div>
                <strong>
                </strong>
                图片{{ imgUrl }} -->
                <div class="update">
                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-success="imgChange" list-type="picture"
                        :limit="1">
                        <el-button type="primary">点击上传</el-button>

                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件,且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </div>
            </div>
            <div>
                <strong>
                    排序:
                </strong>
                <input type="text" v-model="sort">
            </div>
            <div>
                <strong>
                    <i>*</i>
                    广告链接:
                </strong>
                <input type="text" v-model="link">
            </div>
            <div>
                <strong>
                    广告备注:
                </strong>
                <textarea name="" id="" cols="30" rows="4" v-model="other"></textarea>
            </div>
            <div>
                <strong></strong>
                <input type="button" value="提交" @click="submit" class="submit">
            </div>
        </form>
        <el-button text></el-button>
    </div>
</template>

<script lang="ts" setup>
import Title from '@/components/_s_yingxiao/_s_NavTitle.vue'
import { useRoute } from 'vue-router'
import { flash } from '@/request/api'
import { ref } from 'vue'
import { toNumber } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus'


const open = () => {
    ElMessageBox.confirm(
        '确认修改这些信息吗?',
        '提示框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ChangeShit(id, {
                endTime: endtime.value,
                id: sid.value,
                name: name.value,
                note: other.value,
                orderCount: 0,
                pic: imgUrl.value,
                sort: sort.value,
                startTime: begintime.value,
                status: upOrdown.value,
                type: value.value == 'APP首页轮播' ? 1 : 0,
                url: link.value
            })
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '修改取消',
            })
        })
}

const route = useRoute()

let id = toNumber(route.query.id)
let name = ref('')
let place = ref(0) //位置 --数字 根据文字更新
let value = ref('') // 位置 -- 文字 
let begintime = ref('')
let endtime = ref('')
let sid = ref(0)
let upOrdown = ref(0)
let imgUrl = ref('')
let sort = ref(0)
let link = ref('')
let other = ref('')
// 上传图片
let fileList = ref<any>([
    {
        name: name,
        url: imgUrl,
    }
])
let imgChange = (e) => { //图片上传成功之后修改url 
    imgUrl.value = e.data.url


}

// 修改广告函数
function ChangeShit(id: number, advertise: any) {
    
    flash.changeUpdateAdvertise({
        id: id,
        advertise: advertise
    }).then(res => {

    })
}

const options = [
    {
        value: 'APP首页轮播',
        label: 'APP首页轮播',
    },
    {
        value: 'PC首页轮播',
        label: 'PC首页轮播',
    }
]

flash.updateAdvertise(id).then((res) => {
    name.value = res.name //名称
    place.value = res.type // 位置
    value.value = res.type == 1 ? 'APP首页轮播' : 'PC首页轮播'
    begintime.value = res.startTime  //开始
    endtime.value = res.endTime //结束
    upOrdown.value = res.status //上下线
    imgUrl.value = res.pic // 图片地址
    sort.value = res.sort //排序
    sid.value  = res.id
    link.value = res.url //链接
    other.value = res.note //备注
})

let submit = () => {
    open()

}
</script>
 
<style lang="scss" scoped>
small {
    font-size: 12px;
}

.formstyle div[data-v-f22e5705] {
    padding-left: 0;
}

.upload-demo {
    display: block !important;
    width: 500px;
}

.formstyle {
    font-size: 14px;
    width: 800px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    color: #666;
    padding-left: 200px;

    div {
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        i {
            color: red;
            padding: 0 1px;
        }

        strong {
            text-align: right;
            width: 100px;
            padding-right: 20px;
        }

        span {
            height: 15px;
            background-color: rgb(245, 247, 250);
            padding: 3px 6px;
            border: 1px solid #ddd;
            padding: 8px 20px;
            color: #999;
            border-left: none;
            border-radius: 0 3px 3px 0;
        }

        .spantwo {
            border: 1px solid #ddd;
            border-right: none;
            border-radius: 3px 0px 0px 3px;

        }

        input {
            border: 1px solid #ddd;
            padding: 8px 10px;
            outline: none;
            border-radius: 3px;
            width: 350px;
        }

        textarea {
            width: 370px;
            height: 100px;
            box-sizing: border-box;
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
            outline: none;
        }

        .submit {
            background-color: rgb(64, 158, 255);
            border: none;
            padding: 8px 15px;
            width: 80px;
            color: white;
            cursor: pointer;
        }
    }
}

.formstyle div[data-v-087bc0c5] {
    padding-left: 0;
}</style>